<template>
  <div>
    <div class="head">
      <img
        v-if="boln"
        src="http://liufusong.top:8080/img/profile/bg.png"
        alt=""
      />
      <img v-else src="http://liufusong.top:8080/img/avatar.png" alt="" />
    </div>
    <div class="user" :class="{ userheight: !boln }">
      <van-image
        round
        width="4rem"
        height="4rem"
        class="userimg"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <span class="uname">{{ username || '游客' }}</span>
      <van-button v-if="boln" type="primary" class="btu" to="/login"
        >去登录</van-button
      >
      <van-button v-else type="primary" @click="fn()" class="btu btu-rad"
        >退出</van-button
      >
      <p @click="update" v-if="!boln">编辑个人资料<van-icon name="play" /></p>
    </div>
    <div class="footer">
      <van-grid :column-num="3" :border="false">
        <van-grid-item
          @click="collect(1)"
          class="border"
          icon="star-o"
          text="我的收藏"
        />
        <van-grid-item
          @click="collect(0)"
          class="border"
          icon="wap-home-o"
          text="我的出租"
        />
        <van-grid-item class="border" icon="clock-o" text="看房记录" />
        <van-grid-item class="border" icon="idcard" text="成为房主" />
        <van-grid-item class="border" icon="manager-o" text="个人资料" />
        <van-grid-item class="border" icon="service-o" text="联系我们" />
      </van-grid>
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getToken, del } from '@/utils/storage'
import { user } from '@/api/user'
export default {
  async created() {
    const {
      body: { avatar, gender, nickname, id }
    } = await user()
    this.username = nickname
    if (getToken()) {
      this.boln = !this.boln
    }
  },
  data() {
    return {
      boln: true,
      username: ''
    }
  },
  methods: {
    fn() {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确定退出'
      })
        .then(() => {
          del()
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    collect(age) {
      if (getToken()) {
        age ? this.$router.push('/mycollect') : this.$router.push('/myrent')
      } else {
        this.$router.push('/login')
      }
    },
    update() {
      this.$dialog
        .confirm({
          title: '标题',
          message: '弹窗内容'
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  
}
</script>

<style lang="less" scoped>
.head {
  position: absolute;
  top: 0;
  z-index: -10;
  width: 100%;
  img {
    width: 100%;
  }
}
.userheight {
  height: 30% !important;
}
.user {
  position: absolute;
  background: #fff;
  width: 75%;
  height: 25%;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 10px 3px #ddd;
  margin: 50px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 13px;
  .uname {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
  }
  .btu {
    margin-top: 30%;
    height: 1.875rem;
    border-radius: 0.5rem;
    font-size: 13px;
  }
  .btu-rad {
    height: 1.25rem;
    border-radius: 0.625rem;
  }
  .userimg {
    position: absolute;
    top: -25%;
    left: 38%;
    border: 0.375rem solid #f5f5f5;
  }
  p {
    margin-top: 30px;
    font-size: 12px;
    color: #999;
  }
}
.footer {
  position: absolute;
  bottom: 5rem;
  text-align: center;
  img {
    width: 90%;
  }
  .border {
    border: none !important;
  }
}
</style>
